<template>
  <view style="padding-bottom: 160px;">
    <u-navbar
      v-if="!$isWeixin()"
      :title="title"
      :titleBold="true"
      :background="{ backgroundColor: '#ffffff' }"
      :is-fixed="true"
    ></u-navbar>

    <u-tabs active-color="#FF7A23" :list="tabList" :current="tabIndex" @change="index => (tabIndex = index)"></u-tabs>

    <view class="" v-show="tabIndex === 0">
      <u-cell-group>
        <u-cell-item title="申请时间" :arrow="false">
          {{ (state.StoreRenovationApplyInfo.ApplicationDate * 1000) | date('yyyy-mm-dd') }}
        </u-cell-item>
        <u-cell-item title="申请备注" :arrow="false">
          {{ state.StoreRenovationApplyInfo.ApplicationRemake }}
        </u-cell-item>
      </u-cell-group>

      <u-gap height="40" bg-color="#f5f5f5"></u-gap>

      <u-cell-group>
        <u-cell-item title="效果图片" :border-bottom="false" :arrow="false" style="padding-bottom: 0;"></u-cell-item>
        <u-cell-item :arrow="false" style="padding: 10rpx">
          <image-upload v-model="form.EffectList" :multiple="true" uploadText="添加效果图"></image-upload>
        </u-cell-item>
        <u-cell-item :arrow="false" title="实景图片" :border-bottom="false" style="padding-bottom: 0;"></u-cell-item>
        <u-cell-item title="" :arrow="false" style="padding: 10rpx">
          <!-- <real-image-upload v-model="form.RealList" :multiple="true"></real-image-upload> -->
          <real-image-upload :input="input" v-model="form.RealList"></real-image-upload>
        </u-cell-item>
        <!-- <u-cell-item
          title="合同盖章版电子文件"
          :border-bottom="false"
          :arrow="false"
          style="padding-bottom: 0;"
        ></u-cell-item>
        <u-cell-item :arrow="false" style="padding: 10rpx">
          <image-upload v-model="form.Contract_PhotoList" :multiple="true" uploadText="添加效果图"></image-upload>
        </u-cell-item> -->

        <block v-if="countCharacterOccurrences(state.Double_Dealer_BaseInfo.Account, 'D') < 2">
          <u-cell-item title="分销文件" :arrow="false" :border-bottom="false" style="padding-bottom: 0;"></u-cell-item>
          <u-cell-item :arrow="false" style="padding: 10rpx;">
            <image-upload v-model="distributionImageList" @change="onDistributionImageChange"></image-upload>
          </u-cell-item>
          <u-cell-item :arrow="false" style="padding: 10rpx;">
            <file-picker v-model="distributionFileList" @change="onDistributionFileChange"></file-picker>
          </u-cell-item>
        </block>

        <!-- <u-cell-item required :arrow="false" title="精选专卖店">
					<u-radio-group v-model="form.IsExclusive">
						<u-radio :name="1">是</u-radio>
						<u-radio :name="2">否</u-radio>
					</u-radio-group>
				</u-cell-item> -->
        <u-cell-item required :arrow="false" title="金额" :value="totalMoney"></u-cell-item>

        <u-cell-item :arrow="false" title="审核状态" :value="state.StoreRenovationApplyInfo.StateName"></u-cell-item>
        <review-flow :data="state.AuditForList"></review-flow>
      </u-cell-group>

      <block v-if="showReview">
        <u-gap height="40" bg-color="#f5f5f5"></u-gap>
        <review-form ref="reviewForm"></review-form>
      </block>
    </view>

    <view class="" v-if="tabIndex === 1"><relations :list="state.This_Dealer_RelationList"></relations></view>

    <view class="" v-if="tabIndex === 2">
      <u-cell-item title="一级经销商名称" :arrow="false" :value="state.First_Dealer_BaseInfo.Name"></u-cell-item>
      <u-cell-item
        :border-bottom="false"
        title="二级经销商名称"
        :arrow="false"
        :value="state.Double_Dealer_BaseInfo.Name"
      ></u-cell-item>
      <store-information :data="state.Door_Dealer_BaseInfo"></store-information>
    </view>

    <view class="btn-group-fixed"><u-button v-if="showReview" type="warning" @click="submit">提交审核</u-button></view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '费用审核',
      tabList: [{ name: '申请备注' }, { name: '销售业务关系' }, { name: '基本信息' }],
      tabIndex: 0,

      showReview: false,

      distributionFileList: [],
      distributionImageList: [],

      state: {
        Door_Dealer_BaseInfo: {},
        Double_Dealer_BaseInfo: {},
        EffectList: [],
        First_Dealer_BaseInfo: {},
        RealList: [],
        ShowLevel: null,
        StoreRenovationApplyInfo: {},
        This_Dealer_OtherInfo: {},
        This_Dealer_RelationList: []
      },

      input: false,

      form: {
        // 审核编号
        StoreRenovationId: '1040',
        DealerId: null,
        // 精选专卖店 1是, 2否, 0不选
        IsExclusive: null,
        // 效果图
        EffectList: [],
        // 实景图列表
        RealList: [],
        Distribution_PhotoList: [],
        Contract_PhotoList: [],
        // 申请类型 1：门店动力金 2：渠道补贴
        ApplyType: '1',
        State: '',
        AuditRemark: '',
        Total_Amount: ''
      }
    };
  },

  onLoad(options) {
    if (options.Id) {
      this.form.StoreRenovationId = options.Id;
    }
    if (options.DealerId) {
      this.form.DealerId = options.DealerId;
    }
    if (options.ApplyType) {
      this.form.ApplyType = options.ApplyType;

      if (options.ApplyType == 1) {
        this.title = '动力金审核';
      }

      if (options.ApplyType == 2) {
        this.title = '渠道补贴审核';
      }
    }
    this.getData();

    if (this.$isWeixin()) {
      this.$setTitle(this.title);
    }
  },

  computed: {
    totalMoney() {
      let sum = 0;
      this.form.RealList &&
        this.form.RealList.forEach(item => {
          sum += parseInt(item.Amount ? item.Amount : 0);
        });
      return sum;
    }
  },

  methods: {
    countCharacterOccurrences(str, char) {
      if (!str) {
        return 0;
      }

      // 使用正则表达式匹配字符出现的次数
      const regex = new RegExp(char, 'g');
      const count = (str.match(regex) || []).length;
      return count;
    },

    onDistributionImageChange(list) {
      const initialPhotoList = [];
      if (this.distributionFileList.length > 0) {
        initialPhotoList.push(...this.distributionFileList);
      }
      initialPhotoList.push(...list);
      this.form.Distribution_PhotoList = initialPhotoList;
    },

    onDistributionFileChange(list) {
      const initialPhotoList = [];
      if (this.distributionImageList.length > 0) {
        initialPhotoList.push(...this.distributionImageList);
      }
      initialPhotoList.push(...list);
      this.form.Distribution_PhotoList = initialPhotoList;
    },

    submit() {
      const applyForm = this.$refs.applyForm;

      this.form.AuditRemark = this.$refs.reviewForm.form.AuditRemark;
      this.form.State = this.$refs.reviewForm.form.State;

      if (!this.form.State) {
        this.$u.toast('请选择审核状态');
        return false;
      }

      let flag = this.form.RealList.every(item => item.Amount >= 0);
      if (!flag) {
        this.$u.toast('实景图审批金额必须大于等于0');
        return false;
      }

      this.form.Total_Amount = this.totalMoney;

      this.$u.api.approvalStoreRenovation(this.form).then(res => {
        const { ResultCode, ResultMessage } = res;
        if (ResultCode === 1) {
          this.$u.toast(ResultMessage);
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        }
      });
    },

    backToList() {
      uni.navigateBack();
    },

    getData() {
      this.$u.api
        .getStoreRenovationReviewDetail({
          StoreRenovationId: this.form.StoreRenovationId,
          ApplyType: this.form.ApplyType
        })
        .then(res => {
          let { ResultCode, ResultMessage, ResultData, Fill_In_Permissions } = res;
          if (ResultCode === 1) {
            this.state = ResultData;

            if (this.vuex_user.ManagerId == res.NextManagerId) {
              this.showReview = true;
            }

            if (this.state.EffectList) {
              this.form.EffectList = this.state.EffectList;
            }
            if (this.state.RealList) {
              this.form.RealList = this.state.RealList;
            }

            if (this.state.Contract_PhotoList) {
              this.form.Contract_PhotoList = this.state.Contract_PhotoList;
            }
            if (this.state.Distribution_PhotoList) {
              this.form.Distribution_PhotoList = this.state.Distribution_PhotoList;
              this.distributionImageList = this.form.Distribution_PhotoList.filter(item => item.TypeId == 1);
              this.distributionFileList = this.form.Distribution_PhotoList.filter(item => (item.TypeId = 4));
            }

            this.form.IsExclusive = this.state.StoreRenovationApplyInfo.IsExclusive;

            if (Fill_In_Permissions && Fill_In_Permissions > 0) {
              this.input = true;
            }
          }
        });
    },

    onFileChange(list, name) {
      const file = list[list.length - 1].file;
      this.$fileUpload(file).then(res => {
        console.log(res);
        this.state[name].push({
          Value: res.key
        });
      });
    },

    deleteFile(index, name) {
      uni.showModal({
        title: '提示',
        content: '您确定要删除此项吗？',
        success: async res => {
          if (res.confirm) {
            this.state[name].splice(index, 1);
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.u-list-item {
  margin: 0 !important;
}
</style>
